<template>
	<div style="margin: 10px;">
		<el-row :gutter="10">
			<el-col :span="12">
				<el-card style="height: 610px;">
					<div class="title">空间气体监测</div>
					<div class="cesuo-list">
						<el-table
						:data="tableData"
						style="width: 100%;font-size: 12px;"
						>
						<el-table-column
							prop="date"
							label="监测时间"
							align="center">
						</el-table-column>
						<el-table-column
							prop="name"
							label="厕所名称"
							align="center">
						</el-table-column>
						<el-table-column
							prop="type"
							label="厕所类型"
							align="center">
						</el-table-column>
						<el-table-column
							prop="ammonia"
							label="氨气浓度"
							align="center">
						</el-table-column>
						<el-table-column
							prop="sulfuretted"
							label="硫化氢"
							align="center">
						</el-table-column>
						</el-table>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-row :gutter="10">
					<el-col :span="12">
						<el-card class="box">
							<div class="title">厕所统计</div>
							<div class="echartsbox" ref="echarts2">
								<div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="12">
						<el-card class="box">
							<div class="title">上月客流排名</div>
							<div class="qushiboxc">
							     <div class="paihang-lanmu">
							       <el-row :gutter="20">
							          <el-col :span="8"><div class="ph-text"><i class="el-icon-s-help" style="color:#D9001B;"></i> 男厕一号位</div></el-col>
							          <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="90" color="#D9001B"></el-progress></el-col>
							          <el-col :span="4">10</el-col>
							        </el-row>
							     </div>
							     <div class="paihang-lanmu">
							       <el-row :gutter="20">
							          <el-col :span="8"><div class="ph-text"><i class="el-icon-s-help" style="color:#F59A23;"></i> 女厕一号位</div></el-col>
							          <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="80" color="#F59A23"></el-progress></el-col>
							          <el-col :span="4">9</el-col>
							        </el-row>
							     </div>
							     <div class="paihang-lanmu">
							       <el-row :gutter="20">
							          <el-col :span="8"><div class="ph-text"><i class="el-icon-s-help" style="color:#F59A23;"></i> 男厕二号位</div></el-col>
							          <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="68" color="#F59A23"></el-progress></el-col>
							          <el-col :span="4">8</el-col>
							        </el-row>
							     </div>
							     <div class="paihang-lanmu">
							       <el-row :gutter="20">
							          <el-col :span="8"><div class="ph-text"><i class="el-icon-s-help" style="color:#00BFBF;"></i> 女厕二号位</div></el-col>
							          <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="58" color="#00BFBF"></el-progress></el-col>
							          <el-col :span="4">7</el-col>
							        </el-row>
							     </div>
							     <div class="paihang-lanmu">
							       <el-row :gutter="20">
							          <el-col :span="8"><div class="ph-text"><i class="el-icon-s-help" style="color:#00BFBF;"></i> 女厕三号位</div></el-col>
							          <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="40" color="#00BFBF"></el-progress></el-col>
							          <el-col :span="4">6</el-col>
							        </el-row>
							     </div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-card class="box" style="margin-top: 10px;">
					<div class="title">今日入厕客流</div>
					<div class="echartsbox" ref="echarts">
						<div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default{
		 data() {
			 return{
				  tableData: [{
				   date: '2016-05-02',
				   name: '厕所1',
				   type: '男',
				   ammonia:'15ppm',
				   sulfuretted:'15ppm',
				 }, {
				   date: '2016-05-04',
				   name: '厕所1',
				   type: '男',
				   ammonia:'15ppm',
				   sulfuretted:'15ppm',
				 }, {
				   date: '2016-05-01',
				   name: '厕所1',
				   type: '男',
				   ammonia:'15ppm',
				   sulfuretted:'15ppm',
				 }, {
				   date: '2016-05-03',
				   name: '厕所1',
				   type: '男',
				   ammonia:'15ppm',
				   sulfuretted:'15ppm',
				 }],
				 cesuotongjiData:[{ value: 15, name: '维修' },{ value: 45, name: '占位' },{ value: 45, name: '空闲' }],
				 cesuotongjiNums:105,
			 }
		 },
	mounted(){
		this.jinrirukeliuEcharts()
		this.cesuotongjiEcharts()
	},
	methods:{
		jinrirukeliuEcharts(){
			var echarts=this.$refs.echarts;
			let myChart = this.$echarts.getInstanceByDom(
			  this.$refs.echarts
			);
			if (myChart == null) {
			  myChart = this.$echarts.init(echarts);
			}
			var option;
			option = {
			  color:'#6699ff',
			    tooltip: {
			    trigger: 'axis',
			    axisPointer: {
			      type: 'cross',
			      label: {
			        backgroundColor: '#6a7985'
			      }
			    }
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			  },
			  grid: {
			    left: '3%',
			    right: '4%',
			    bottom: '3%',
				top:'20',
			    containLabel: true
			  },
			  yAxis: {
			    type: 'value',
			    boundaryGap: false,
			  },
			  series: [
			    {
			      data: [120, 282, 111, 234, 220, 340, 310],
			      type: 'line',
			      areaStyle: {
			        opacity: 0.8,
			        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			          {
			            offset: 0,
			            color: '#3399ff'
			          },
			           {
			            offset: 0.5,
			            color: '#3399ff'
			          },
			          {
			            offset: 1,
			            color: '#ffffff'
			          }
			        ])
			      },
			      emphasis: {
			        focus: 'series'
			      },
			      smooth: true,
			    }
			  ]
			};
				option && myChart.setOption(option);
				//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
		},
		cesuotongjiEcharts(){
		  var echarts2=this.$refs.echarts2;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts2
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts2);
		  }
		  
		  var option;
		  option = {
		    title: {
		      text: '厕所总数',
		      textStyle:{
		          fontSize:14,
		       },
		      // subtext:numFormat(parseInt(this.gaojingNums))+'个',
			  subtext:this.cesuotongjiNums+'个',
		      subtextStyle:{
		        color:'#999999',
		      },
		      textAlign:'center',
		      left: '48%',
		      top: '45%'
		    },
		    tooltip: {
		      trigger: 'item'
		    },
		    legend: {
		      left: '0%',
		      top: "0%",
		      bottom: 20,
		      orient: 'vertical',
		      x: 'left',
		    },
		    series: [
		      {
		        name: '告警等级占比',
		        type: 'pie',
		        radius: ['30%', '60%'],
		        center: ['50%', '50%'],
		        roseType: 'area',
		        data: this.cesuotongjiData,
				label:{
						  formatter:function(data){
						  return `${data.name} (${data.value}) `
					   }
					},
		      }
		    ]
		  };
		
				option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
		},
	},
}
	
</script>

<style scoped>
.title{
	padding: 10px;
	font-weight: bold;
}
.cesuo-list{
	padding: 0 15px;
	overflow: hidden;
}
.box{
	height: 300px;
}
.echartsbox{
	height: 260px;
	width: 100%;
}
.paihang-lanmu{
  padding:15px 5px 15px 15px;
}
.ph-text{
	  font-size: 14px;
  }
</style>